<template>
    <div>
        <el-button size="small" type="primary" @click="cliAddCard" class="mb5"
        >
            新增会员卡
        </el-button>
        <el-table :data="tempList" border class="wPer100">
            <el-table-column prop="id" label="会员卡id" width="80">
            </el-table-column>
            <el-table-column prop="month" label="会员持续时间/（月）" width="170">
            </el-table-column>
            <el-table-column prop="price" label="会员卡价格" width="100">
            </el-table-column>
            <el-table-column label="购买/赠送" width="90">
              <template slot-scope="scope">
                {{
                  scope.row.status == 1 ? '购买' :
                  scope.row.status == 2 ? '赠送' : scope.row.status
                }}
              </template>
            </el-table-column>
            <el-table-column label="启用/禁用" width="90">
              <template slot-scope="scope">
                {{
                  scope.row.type == 1 ? '启用' :
                  scope.row.type == 2 ? '禁用' : scope.row.type
                }}
              </template>
            </el-table-column>
            <el-table-column prop="text" label="会员卡描述"
            ></el-table-column>
            <el-table-column label="封面图" width="130">
                <template slot-scope="scope">
                    <el-image :preview-src-list="[scope.row.thumb]"
                        style="width: 100px; height: 100px"
                        :src="scope.row.thumb" fit="cover"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="145">
                <template slot-scope="scope">
                    <el-button size="mini" type="warning" class="mr5"
                        @click="cliModifyBtn(scope.row)"
                    >
                      修改
                    </el-button>
                    <el-button size="mini" type="success"
                        @click="cliPresenterBtn(scope.row.id)"
                        v-if="scope.row.status == 2 && scope.row.type == 1"
                    >
                      赠送
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="dialogFormVisibleType == 1 ? '新增会员卡' : '修改会员卡'"
            :visible.sync="dialogFormVisible1" width="375px"
        >
            <div class="mb14">
                <el-form :model="distributorData1" status-icon
                    :rules="distributorRules1" ref="distributorData1" label-width="120px"
                >
                    <el-form-item label="价格：" prop="price">
                        <el-input v-model="distributorData1.price" size="small" type="number"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="时间/月：" prop="month">
                        <el-input v-model="distributorData1.month" size="small" type="number"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="购买/赠送：">
                        <el-radio-group v-model="distributorData1.status">
                            <el-radio label="1">购买</el-radio>
                            <el-radio label="2">赠送</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="启用/禁用：">
                        <el-radio-group v-model="distributorData1.type">
                            <el-radio label="1">启用</el-radio>
                            <el-radio label="2">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="会员卡描述：">
                        <el-tag type="warning" size="mini" class="woWrBreWor">
                          英文竖线“|”分隔为多条
                        </el-tag>
                        <el-input type="textarea" :rows="2"
                            placeholder="请输入会员卡描述"
                            v-model="distributorData1.text"
                        >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="封面图（1张）：" prop="thumb">
                        <el-tag type="warning" size="mini" class="woWrBreWor">
                          最佳尺寸宽335*高150
                        </el-tag>
                        <el-upload list-type="picture-card" action=""
                            :auto-upload="false" :file-list="fileList"
                            :limit="1" :on-change="getFile" :multiple="false"
                        >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="subDistributor1()"
                        size="small" class="mr5"
                      >
                        提交
                      </el-button>
                      <el-button @click="resetDistributor('distributorData1')" size="small">
                        重置
                      </el-button>
                  </el-form-item>
                </el-form>
            </div>
        </el-dialog>
        <el-dialog title="赠送会员卡"
            :visible.sync="dialogFormVisible2" width="375px"
        >
            <div class="mb14">
                <el-form :model="distributorData2" status-icon
                    :rules="distributorRules2" ref="distributorData2" label-width="100px"
                >
                    <el-form-item label="用户id：" prop="mid">
                        <el-input v-model="distributorData2.mid" size="small" type="number"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="subDistributor2()"
                        size="small" class="mr5"
                      >
                        提交
                      </el-button>
                      <el-button @click="resetDistributor('distributorData2')"
                        size="small"
                      >
                        重置
                      </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getCardRuleList, addMemberCardRule, saveCardRule,
    giveYouMemberCard, apiAdminUploadBase64Pic } from '@s/api'
import { getBase64, imgUrl } from "@u/debounce";
export default {
    data() {
        let priceCheck = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入会员卡价格'));
          } else {
            callback();
          }
        };
        let monthCheck = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入持续时间/（月）'));
          } else {
            callback();
          }
        };
        let midCheck = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入用户id'));
          } else {
            callback();
          }
        };
        return {
            dialogFormVisibleType: 0,
            dialogFormVisible1: false,
            fileList: [],
            distributorData1: {
                id: '', price: '', month: '', status: '1', type: '1', text: '',
                thumb: ''
            },
            distributorRules1: {
                price: [{ validator: priceCheck, trigger: 'blur' }],
                month: [{ validator: monthCheck, trigger: 'blur' }],
            },
            tempList: [],
            dialogFormVisible2: false,
            distributorData2: { mid: '', id: '' },
            distributorRules2: {
                mid: [{ validator: midCheck, trigger: 'blur' }],
            }
        }
    },
    mounted() {
        this.getDataList1();

    },
    methods: {
        cliAddCard() {
            this.dialogFormVisibleType = 1;
            this.fileList = [];
            this.distributorData1 = {
                id: '', price: '', month: '', status: '1', type: '1', text: '',
                thumb: ''
            };
            this.dialogFormVisible1 = true;
        },
        getFile(file, fileList) {
            getBase64(file.raw).then(res1 => {
                let postData = new FormData(); 
                postData.append('base64', res1);
                postData.append('token', this.$store.getters.token);
                apiAdminUploadBase64Pic(postData).then(res2 => {
                    this.$message({ type: "success", message: res2.message });
                    this.distributorData1.thumb = imgUrl + res2.data;
                    console.log(11, this.distributorData1)
                    console.log(22, res2)
                })
            })
        },
        subDistributor1() {
            this.$refs['distributorData1'].validate(valid => {
                if (valid) {
                    if(this.dialogFormVisibleType == 1) {
                        addMemberCardRule({
                            token: this.$store.getters.token,
                            price: this.distributorData1.price,
                            month: this.distributorData1.month,
                            status: this.distributorData1.status,
                            type: this.distributorData1.type,
                            text: this.distributorData1.text,
                            thumb: this.distributorData1.thumb
                        }).then(res1 => {
                            this.getDataList1();
                            this.dialogFormVisible1 = false;
                            this.$message({ type: "success", message: '新增成功' });
                        })
                    }else if(this.dialogFormVisibleType == 2) {
                        saveCardRule({
                            token: this.$store.getters.token,
                            id: this.distributorData1.id,
                            price: this.distributorData1.price,
                            month: this.distributorData1.month,
                            status: this.distributorData1.status,
                            type: this.distributorData1.type,
                            text: this.distributorData1.text,
                            thumb: this.distributorData1.thumb
                        }).then(res1 => {
                            console.log(123, res1)
                            this.dialogFormVisible1 = false;
                            this.$message({ type: "success", message: '修改成功' });
                            this.getDataList1();
                        })
                    }
                }
            });
        },
        resetDistributor(formName) {
            this.$refs[formName].resetFields();
        },
        getDataList1() {
            getCardRuleList({
                token: this.$store.getters.token,
                // page: 0,
                // number: 10
            }).then(res => {
              this.tempList = res.data;
            })
        },
        cliPresenterBtn(id) {
            this.distributorData2.id = id;
            this.dialogFormVisible2 = true;
        },
        subDistributor2() {
            this.$refs['distributorData2'].validate(valid => {
                if (valid) {
                    console.log(this.distributorData2)
                    giveYouMemberCard({
                        token: this.$store.getters.token,
                        mid: this.distributorData2.mid,
                        id: this.distributorData2.id
                    }).then(res => {
                        this.dialogFormVisible2 = false;
                        this.distributorData2 = { mid: '', id: '' };
                        this.$message({ type: "success", message: '赠送成功' });
                    })
                }
            });
        },
        cliModifyBtn(scopeRow) {
            this.dialogFormVisibleType = 2;
            this.fileList = [{
                name: scopeRow.id, url: scopeRow.thumb
            }];
            this.distributorData1 = {
                id: scopeRow.id,
                price: scopeRow.price, month: scopeRow.month,
                status: scopeRow.status, type: scopeRow.type,
                text: scopeRow.text, thumb: scopeRow.thumb
            };
            this.dialogFormVisible1 = true;
        }
    }
}
</script>
<style>
.el-table--border, .el-table td, .el-table th.is-leaf {
    border-color: #ccc!important;
}
.el-table--border {
  border-right: 1px solid #ccc!important;
  border-bottom: 1px solid #ccc!important;
}
.el-button+.el-button {margin-left: 0;}
</style>